<template>
  <el-dialog title="查看租期" :visible.sync="dialogVisible" width="1000px">
    <el-table :data="tableData" border>
      <el-table-column label="订单" prop="trade_no" width="120"></el-table-column>
      <el-table-column align="center" label="期数" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.which_period}}/{{scope.row.month_total}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租期" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.begin_time}} 至 {{scope.row.end_time}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租金" width="120">
        <template slot-scope="scope">
          <span>￥{{scope.row.rent}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status==0||scope.row.status==4?'':'success'"
          >{{scope.row.status==1?'已支付':scope.row.status==2?'已退款':scope.row.status==3?'已买断':scope.row.status==4?'已逾期':scope.row.status==5?'线下支付':'未支付'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间" prop="pay_time" width="100"></el-table-column>
      <el-table-column align="center" label="预计扣款日" prop="begin_time" width="100"></el-table-column>
      <el-table-column align="center" label="流水号" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.pay_time?scope.row.alipay_trade_no:''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="自动扣款功能">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.withhold_status"
            active-color="#2993FF"
            inactive-color="#666666"
            :active-value="1"
            :inactive-value="2"
            @change="switchChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="viewLog(scope.row)">查看记录</el-button>
          <el-button
            v-if="scope.row.order_status>9&&scope.row.is_withhold==1&&scope.row.pay_type!=1&&$hasMethod('#withhold')"
            type="warning"
            size="mini"
            @click="withholdItem(scope.row)"
          >发起代扣</el-button>
          <el-button type="success" size="mini" @click="offlineRepay(scope.row.id)">线下还款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
    </div>
    <deduct-log ref="deductLog" :order-no="selectedItem.trade_no" :lease-id="selectedItem.id"></deduct-log>
  </el-dialog>
</template>

<script>
import { getLease, offLineRepay } from '@/api/order'
import { manualWithholding, withholdSwitch } from '@/api/finance'
import deductLog from './deductLog'
export default {
  props: ['orderId'],
  components: { deductLog },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      selectedItem: {},
    }
  },
  methods: {
    switchChange(row) {
      withholdSwitch({
        orderId: row.order_id,
        leaseId: row.id,
        withholdStatus: row.withhold_status,
      }).then((res) => {
        this.$parent.getList(true)
      })
    },
    // 线下还款
    offlineRepay(id) {
      this.$confirm('是否确认线下还款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(async () => {
          let res = await offLineRepay({ leaseId: id })
          if (res) {
            this.$message.success('设置线下还款成功！')
            getLease(this.orderId).then((res) => {
              this.tableData = res || []
            })
          } else {
            this.$message.info('设置失败！')
          }
        })
        .catch(() => {})
    },
    viewLog(row) {
      this.selectedItem = { ...row }
      this.$refs.deductLog.dialogVisible = true
    },
    withholdItem(row) {
      console.log('row2', row)
      this.$confirm('您确定要发起代扣吗？', '发起代扣', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          manualWithholding({
            orderId: row.order_id,
            leaseId: row.id,
          }).then((res) => {
            setTimeout(() => {
              this.$parent.getList(true)
            }, 1000)
          })
        })
        .catch(() => {})
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getLease(this.orderId).then((res) => {
          this.tableData = res || []
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  max-height: 650px;
  overflow: auto;
}
</style>